<template>
    <ZkModalVue
        :title="title"
        :size="'lg'"
        :visible="visible"
        :confirmLoading="uploading"
        @cancel="importExcelHandleCancel"
        @ok="importExcelHandleChange"
    >
    <a-spin tip="上传中..." :spinning="uploading">
        <a-upload-dragger
            name="file"
            accept=".xlsx, .xls"
            :file-list="fileList"
            :multiple="false"
            :remove="handleRemove"
            :before-upload="beforeUpload"
        >
            <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">请将文件拖拽到此处上传</p>
            <p class="ant-upload-hint">支持单个上传，也可以点击后选择文件上传</p>
        </a-upload-dragger>
        <a @click="importTemplate" v-show="showTemplate" >下载模板</a>
    </a-spin>
    </ZkModalVue>
</template>

<script>
import ZkModalVue from '@/appBase/ZkModal.vue';
import { downloadFile } from '../service/base';
// import { importTemplate, importData } from "@/api/system/user";

export default {
    name: "ImportExcel",
    props: {},
    components: {
        ZkModalVue
    },
    data() {
    return {
        title: "",
        visible: false,
        uploadStatus: "",
        fileList: [],
        // 是否禁用上传
        uploading: false,
        showTemplate: true,
    };
  },
    filters: {},
    created() {},
    computed: {},
    watch: {},
    methods: {
        // 展示模态窗 初始化数据
        show(param) {
            this.visible = true;
            this.title = param.title || '导入';
            if (param.importTemplate) {
                this._importTemplate = param.importTemplate;
                this.showTemplate = true;
            } else {
                this.showTemplate = false;
            }
            this._importData = param.importData;
        },
        /** 导入excel窗体关闭 */
        importExcelHandleCancel(e) {
            this.visible = false;
            this.fileList = [];
            // 关闭后刷新列表
            this.$emit("ok");
        },
        /** 下载模板操作 */
        importTemplate() {
            this._importTemplate().then((response) => {
                downloadFile(response.msg);
            });
        },
        beforeUpload(file) {
            this.fileList = [file];
            return false;
        },
        /** 导入 */
        importExcelHandleChange() {
            if (!this._importData) {
                return;
            }
            this.uploading = true;
            const { fileList } = this;
            const formData = new FormData();
            formData.append("file", fileList[0]);
            this._importData(formData).then((response) => {
                this.fileList = [];
                this.$message.success(response.msg);
                this.visible = false;
                this.$emit("ok");
            });
            this.uploading = false;
        },
        handleRemove() {
            this.fileList = [];
            this.uploading = false;
        },
  },
};
</script>